import { Application, Matrix, Sprite, Transform, Text, Graphics, Point, Container } from 'pixi.js'
import { MainWindow } from '../views/MainWindow';
import { dragonBones, DragonBones } from '../models/DragonBones';
import { ArmatureController } from './ArmatureController';
import monster from "../../assets/monster.png";
import fork from "../../assets/fork.png";

import { CursorManager } from './CursorManager';
import { Viewport } from 'pixi-viewport';

export class MainController {
    private _app: Application;
    private _view: MainWindow;
    private _model: DragonBones;
    public curArmature: number = 0;

    private _armatureController!: ArmatureController;
    private _cursorManager!: CursorManager;

    private update(delta: number): void {
        //console.log("update", this);
    }

    private _initControllers(): void {
        this._armatureController = new ArmatureController(this._view.armatureView, this._model.armature[this.curArmature]);
    }

    public test4(): void {
        const c1 = new Container()
        c1.x = 10;
        c1.y = 10;

        const sp1 = Sprite.from(monster);
        sp1.x = 50;
        sp1.y = 50;

        c1.addChild(sp1);

        const c2 = new Container()
        c2.x = 50;
        c2.y = 50;

        const sp2 = Sprite.from(fork);
        sp2.x = 200;
        sp2.y = 200;

        c2.addChild(sp2);

        this._app.stage.addChild(c1);
        this._app.stage.addChild(c2);


        let pt2 = new Point(100, 100);
        let r2 = sp2.toLocal(pt2);
        console.log('rrrr', r2);
    }

    public test1(): void {
        const sprite = Sprite.from(monster);

        // Set the initial position
        sprite.anchor.set(0.5);
        sprite.x = 120;
        sprite.y = 120;

        // Opt-in to interactivity
        sprite.eventMode = 'static';

        // Shows hand cursor
        sprite.cursor = 'pointer';

        // Pointers normalize touch and mouse (good for mobile and desktop)
        sprite.on('pointerdown', onClick);
        this._app.stage.addChild(sprite);

        // const sprite1 = Sprite.from(monster);
        // sprite1.anchor.set(0.5);
        // sprite1.x = 200;
        // sprite1.y = 250;
        // sprite1.rotation = 135 * Math.PI / 180;

        // this._app.stage.addChild(sprite1);

        const sprite2 = Sprite.from(fork);
        // sprite2.anchor.set(0.5);
        // sprite2.x = 120;
        // sprite2.y = 120;
        //sprite2.rotation = 45 * Math.PI / 180;
        //this._app.stage.addChild(sprite2);
        sprite.addChild(sprite2);

        // const sprite3 = Sprite.from(fork);
        // sprite3.anchor.set(0.5);
        // sprite3.x = 400;
        // sprite3.y = 400;
        // this._app.stage.addChild(sprite3);

        // let triangle = new Graphics();
        // triangle.lineStyle(/*border width*/2,/*border color*/ 0xFFBD01, 1);
        // triangle.beginFill(0x66FF33);
        // triangle.drawPolygon([
        //     50, 50,             //First point
        //     80, 80,              //Second point
        //     80, 50                 //Third point
        // ]);

        // this._app.stage.addChild(triangle);

        // let localMatrix = Matrix.IDENTITY;
        // console.log(localMatrix);
        // localMatrix.translate(sprite1.position.x - sprite.position.x, sprite1.position.y - sprite.position.y);
        // localMatrix.rotate(sprite1.rotation - sprite.rotation);
        // localMatrix.scale(sprite1.scale.x / sprite.scale.x, sprite1.scale.y / sprite.scale.y);

        // console.log(localMatrix);

        // let localTransform = Transform.IDENTITY;
        // localTransform.position.set(sprite1.position.x - sprite.position.x, sprite1.position.y - sprite.position.y);
        // localTransform.rotation = sprite1.rotation - sprite.rotation;
        // localTransform.scale.set(sprite1.scale.x / sprite.scale.x, sprite1.scale.y / sprite.scale.y);

        // Alternatively, use the mouse & touch events:
        // sprite.on('click', onClick); // mouse-only
        // sprite.on('tap', onClick); // touch-only

        function onClick() {
            //let localMatrix = Matrix.IDENTITY;
            //localMatrix.copyFrom(sprite.worldTransform).invert().append(sprite1.worldTransform);
            //localMatrix.copyFrom(sprite1.worldTransform).append(sprite.worldTransform.clone().invert());
            //localMatrix.copyFrom(sprite.worldTransform.clone().invert()).append(sprite1.worldTransform);

            // let matrix = Matrix.IDENTITY;
            // matrix.append(localMatrix).append(sprite.localTransform);

            // let myMatrix1 = Matrix.IDENTITY;
            // myMatrix1.copyFrom(sprite2.worldTransform).append(localMatrix);

            // console.log("old ", sprite1.worldTransform);
            // console.log("new  11", myMatrix1);

            // let boneTran = Transform.IDENTITY;
            // myMatrix1.decompose(boneTran);
            // sprite3.setTransform(boneTran.position.x, boneTran.position.y, boneTran.scale.x, boneTran.scale.y, boneTran.rotation, boneTran.skew.x);

            //sprite.rotation = 45 * Math.PI / 180;

            let matrix1 = Matrix.IDENTITY;
            matrix1.scale(-5, -2);
            matrix1.translate(300, 300);
            matrix1.rotate(45 * Math.PI / 180);

            let boneTran = Transform.IDENTITY;
            matrix1.decompose(boneTran);

            console.log("boneTran ", boneTran.position.x, boneTran.position.y, boneTran.scale.x, boneTran.scale.y, boneTran.rotation, boneTran.skew.x, boneTran.skew.y);
            //sprite.setTransform(300, 300, 1, 1, 0, 45 * Math.PI / 180, 45 * Math.PI / 180);
            sprite.setTransform(sprite.position.x, sprite.position.y, 1, 1, 0, -45 * Math.PI / 180, 45 * Math.PI / 180);

            console.log("sprite ", sprite.position.x, sprite.position.y, sprite.scale.x, sprite.scale.y, sprite.rotation, sprite.skew.x, sprite.skew.y);
        }
    }

    public test(): void {
        const sprite = Sprite.from(monster);

        // Set the initial position
        sprite.anchor.set(0.5);
        sprite.x = 100;
        sprite.y = 100;
        sprite.rotation = 45 * Math.PI / 180;

        // Opt-in to interactivity
        sprite.eventMode = 'static';

        // Shows hand cursor
        sprite.cursor = 'pointer';

        // Pointers normalize touch and mouse (good for mobile and desktop)
        sprite.on('pointerdown', onClick);
        this._app.stage.addChild(sprite);


        const sprite1 = Sprite.from(monster);
        sprite1.anchor.set(0.5);
        sprite1.x = 100;
        sprite1.y = 100;
        sprite1.rotation = 45 * Math.PI / 180;

        sprite.addChild(sprite1);
        //this._app.stage.addChild(sprite1);

        // const sprite2 = Sprite.from(logo);
        // sprite2.anchor.set(0.5);
        // sprite2.x = 400;
        // sprite2.y = 400;
        // this._app.stage.addChild(sprite2);

        // let triangle = new Graphics();
        // triangle.lineStyle(/*border width*/2,/*border color*/ 0xFFBD01, 1);
        // triangle.beginFill(0x66FF33);
        // triangle.drawPolygon([
        //     50, 50,             //First point
        //     80, 80,              //Second point
        //     80, 50                 //Third point
        // ]);

        // this._app.stage.addChild(triangle);

        // let localMatrix = Matrix.IDENTITY;
        // console.log(localMatrix);
        // localMatrix.translate(sprite1.position.x - sprite.position.x, sprite1.position.y - sprite.position.y);
        // localMatrix.rotate(sprite1.rotation - sprite.rotation);
        // localMatrix.scale(sprite1.scale.x / sprite.scale.x, sprite1.scale.y / sprite.scale.y);

        // console.log(localMatrix);

        // let localTransform = Transform.IDENTITY;
        // localTransform.position.set(sprite1.position.x - sprite.position.x, sprite1.position.y - sprite.position.y);
        // localTransform.rotation = sprite1.rotation - sprite.rotation;
        // localTransform.scale.set(sprite1.scale.x / sprite.scale.x, sprite1.scale.y / sprite.scale.y);


        // Alternatively, use the mouse & touch events:
        // sprite.on('click', onClick); // mouse-only
        // sprite.on('tap', onClick); // touch-only


        function onClick() {
            // let localMatrix = Matrix.IDENTITY;
            // localMatrix.append(sprite1.localTransform).append(sprite.localTransform.invert());
            // let localTrans = Transform.IDENTITY;
            // localMatrix.decompose(localTrans);
            // console.log("localTrans", localTrans.position.x, localTrans.position.y, localTrans.scale.x, localTrans.scale.y, localTrans.rotation, localTrans.skew.x);

            // let matrix = Matrix.IDENTITY;
            // matrix.append(localMatrix).append(sprite.localTransform);

            // console.log("old ", sprite1.localTransform);
            // console.log("new  ", matrix);


            //let boneTran = Transform.IDENTITY;
            // matrix.decompose(boneTran);
            // console.log("boneTran", boneTran);
            // sprite2.setTransform(boneTran.position.x, boneTran.position.y, boneTran.scale.x, boneTran.scale.y, boneTran.rotation, boneTran.skew.x);

            let spriteMatrix = sprite.localTransform;
            let spriteTrans = Transform.IDENTITY;
            spriteMatrix.decompose(spriteTrans);
            console.log("sprite", spriteMatrix, spriteTrans);
            console.log("sprite detail", spriteTrans.position.x, spriteTrans.position.y,
                spriteTrans.rotation, spriteTrans.scale.x, spriteTrans.scale.y);


            let sprite1LocalMatrix = sprite1.localTransform;
            let sprite1LocalTrans = Transform.IDENTITY;
            sprite1LocalMatrix.decompose(sprite1LocalTrans);
            console.log("sprite1 local", sprite1LocalMatrix, sprite1LocalTrans);
            console.log("sprite1 local detail", sprite1LocalTrans.position.x, sprite1LocalTrans.position.y,
                sprite1LocalTrans.rotation, sprite1LocalTrans.scale.x, sprite1LocalTrans.scale.y);

            console.log("aaaa before", sprite1LocalMatrix.tx, sprite1LocalMatrix.ty, "--", spriteMatrix.tx, spriteMatrix.ty);

            let sprite1GlobalMatrix = sprite1.worldTransform;
            let sprite1GlobalTrans = Transform.IDENTITY;
            sprite1GlobalMatrix.decompose(sprite1GlobalTrans);
            console.log("sprite1 global", sprite1GlobalMatrix, sprite1GlobalTrans);
            console.log("sprite1 global detail", sprite1GlobalTrans.position.x, sprite1GlobalTrans.position.y,
                sprite1GlobalTrans.rotation, sprite1GlobalTrans.scale.x, sprite1GlobalTrans.scale.y);

            console.log("aaaa after", sprite1LocalMatrix.tx, sprite1LocalMatrix.ty, "--", spriteMatrix.tx, spriteMatrix.ty);

            //
            let myMatrix = Matrix.IDENTITY;
            myMatrix.copyFrom(sprite1LocalMatrix);
            myMatrix.append(spriteMatrix);

            let myTrans = Transform.IDENTITY;
            myMatrix.decompose(myTrans);
            console.log("my sprite1 global", myMatrix, myTrans);

            // console.log("tx, ty");
            // console.log("tx, ty", sprite1GlobalMatrix.tx, sprite1GlobalMatrix.ty);
            // console.log("tx, ty", myMatrix.tx, myMatrix.ty, sprite1LocalMatrix, spriteMatrix);

            let localMatrix = Matrix.IDENTITY;
            localMatrix.copyFrom(sprite.localTransform).invert().append(sprite1.worldTransform);

            {
                let myMatrix1 = Matrix.IDENTITY;
                myMatrix1.copyFrom(localMatrix);
                myMatrix1.append(spriteMatrix);

                let myTrans1 = Transform.IDENTITY;
                myMatrix1.decompose(myTrans1);
                let { a, b, c, d, tx, ty } = myMatrix1;
                console.log("my sprite1 global 111", a, b, c, d, tx, ty, myMatrix1, myTrans1);
            }

            //localMatrix.append(sprite.localTransform.invert()).append(sprite1.localTransform);

            // let localMatrix = Matrix.IDENTITY;
            // localMatrix.scale(sprite1GlobalTrans.scale.x / sprite.scale.x, sprite1GlobalTrans.scale.y / sprite.scale.y);
            // localMatrix.rotate(sprite1GlobalTrans.rotation - sprite.rotation);
            // localMatrix.translate(sprite1GlobalTrans.position.x - sprite.position.x, sprite1GlobalTrans.position.y - sprite.position.y);
            // let localTransform = Transform.IDENTITY;
            // localMatrix.decompose(localTransform);
            //console.log("localMatrix detail", localMatrix);

            // let matrix = Matrix.IDENTITY;
            // matrix.prepend()
            // let boneTran = Transform.IDENTITY;
            // matrix.prepend(sprite.localTransform).decompose(boneTran);
            // sprite2.setTransform(boneTran.position.x, boneTran.position.y,
            //     boneTran.scale.x, boneTran.scale.y, boneTran.rotation, boneTran.skew.x, 0);
            // sprite2.scale.set(2, 2);

            // sprite2.rotation = 45 * Math.PI / 180;
            // sprite2.position.set(300, 300);

            // let matrix1 = Matrix.IDENTITY;
            // matrix1.scale(2, 2);
            // // matrix1.rotate(45*Math.PI/180);
            // // matrix1.translate(300, 300);


            // let matrix2 = Matrix.IDENTITY;
            // matrix2.translate(300, 300);

            // let matrix4 = Matrix.IDENTITY;
            // matrix4.rotate(45 * Math.PI / 180);

            // let matrix3 = Matrix.IDENTITY;
            // //matrix3.prepend(matrix1).prepend(matrix4).prepend(matrix2);
            // matrix3.append(matrix2).append(matrix4).append(matrix1);

            // let boneTran = Transform.IDENTITY;
            // matrix3.decompose(boneTran);

            // // localMatrix.prepend(sprite1.localTransform);
            // // let boneTran = Transform.IDENTITY;
            // // localMatrix.decompose(boneTran);
            // sprite2.setTransform(boneTran.position.x, boneTran.position.y, boneTran.scale.x, boneTran.scale.y, boneTran.rotation, boneTran.skew.x);
            //sprite1.rotation += 45* Math.PI/180.0;
            //sprite1.angle += 45;

            // let matrix1 = new MyMatrix();
            // matrix1.scale(2, 2);

            // let matrix2 = new MyMatrix();
            // matrix2.translate(sprite1.position.x, sprite1.position.y);

            // let matrix3 = new MyMatrix();
            // matrix3.concat(matrix1).concat(matrix2);

            // let trans = new MyTransform();
            // trans.fromMatrix(matrix3);
            // console.log(trans);

            // // let boneTran = Transform.IDENTITY;
            // // matrix1.decompose(boneTran);
            // // sprite1.setTransform(boneTran.position.x, boneTran.position.y, boneTran.scale.x, boneTran.scale.y, boneTran.rotation, boneTran.skew.x);
            // sprite1.setTransform(trans.x, trans.y, trans.scaleX, trans.scaleY, trans.rotation, trans.skew);
        }
    }

    public testViewport() {
        const viewport = new Viewport({
            worldWidth: 1000,
            worldHeight: 1000,
            passiveWheel: false,
            events: this._app.renderer.events,
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight,
            //divWheel: app.view,
            //interaction: app.renderer.plugins.interaction
        })
            .drag()
            .pinch({ percent: 2 })
            .wheel()
            .decelerate();

        let rectangle = new Graphics();
        rectangle.lineStyle(4, 0xFF3300, 1);
        rectangle.beginFill(0x66CCFF);
        rectangle.drawRect(0, 0, 64, 64);
        rectangle.endFill();
        rectangle.position.set(100, 100);
        viewport.addChild(rectangle);

        const sprite1 = Sprite.from(monster);
        //     //sprite1.anchor.set(0.5);
        sprite1.position.set(200, 200);
        viewport.addChild(sprite1);

        viewport.on("pointerdown", (event: any) => {
            //console.log(event.world, event.screen, event.viewport, viewport.toWorld(event.global));
            //let pos = viewport.toWorld(event.global);
            // let pos = event.global;
            // if (rectangle.containsPoint(pos)) {
            //     const sprite1 = Sprite.from(monster);
            //     //sprite1.anchor.set(0.5);
            //     sprite1.position.set(64, 64);
            //     rectangle.addChild(sprite1);
            // }
            console.log("to local ", rectangle.toLocal(event.global), viewport.scaled);
            // rectangle.setTransform(200, 200);
            // rectangle.updateTransform();
            let boneTran = Transform.IDENTITY;
            rectangle.localTransform.decompose(boneTran);
            console.log(boneTran.position.x, boneTran.position.y, boneTran.scale.x, boneTran.scale.y, boneTran.rotation, boneTran.skew.x, boneTran.skew.y);

            let boneTran1 = Transform.IDENTITY;
            rectangle.worldTransform.decompose(boneTran1);
            console.log(boneTran1.position.x, boneTran1.position.y, boneTran1.scale.x, boneTran1.scale.y, boneTran1.rotation, boneTran1.skew.x, boneTran1.skew.y);

            //console.log(pos, rectangle.containsPoint(pos));
            console.log("viewport center======", viewport.center, viewport.corner, viewport.bottom, viewport.left, viewport.right)
            console.log("screen size======", viewport.screenHeight, viewport.screenWidth, viewport.screenHeightInWorldPixels, viewport.screenWidthInWorldPixels);
            console.log("world size======", viewport.worldHeight, viewport.worldWidth, viewport.worldScreenHeight, viewport.worldScreenWidth);
            viewport.moveCorner(500, 500)
            console.log("viewport center", viewport.center, viewport.corner, viewport.bottom)
        });

        viewport.on("moved", (event: any) => {
            console.log("moved", event);
        })


        // const text = viewport.addChild(
        //     new Text("Hello, World\n😀", {
        //         fontSize: 24,
        //         lineHeight: 28,
        //         letterSpacing: 0,
        //         fill: 0xffffff,
        //         align: "center"
        //     })
        // );
        // text.anchor.set(0.5);
        // text.resolution = 8;
        // text.x = 100;
        // text.y = 100;

        //this._app.stage.pivot.set(-100, -100);

        this._app.stage.addChild(viewport);
        // const container = new Container();

        // app.stage.addChild(container);

        // let circle = new Graphics();
        // circle.beginFill(0x9966FF);
        // circle.drawCircle(0, 0, 32);
        // circle.endFill();
        // circle.x = 64;
        // circle.y = 130;
        // app.stage.addChild(circle);

        // var graphics = new Graphics()
        // graphics.lineStyle(/*border width*/10,/*border color*/ 0xFFBD01, 1);
        // graphics.drawCircle(200, 200, 50);
        // graphics.endFill();
        // this._stage.addChild(graphics);

        // let triangle = new Graphics();
        // triangle.lineStyle(/*border width*/2,/*border color*/ 0xFFBD01, 1);
        // triangle.beginFill(0x66FF33);
        // triangle.drawPolygon([
        //     -32, 64,             //First point
        //     32, 64,              //Second point
        //     0, 0                 //Third point
        // ]);

        // //Fill shape's color
        // triangle.endFill();

        // // triangle.on('pointerdown', (e)=>{
        // //     console.log("triangle click");
        // //     //triangle.clear();
        // // }, triangle);
        // triangle.eventMode = 'static';
        // triangle.cursor = 'pointer';
        // triangle.onmousedown = (event) => {
        //     console.log("aaaa", event);
        // }

    }

    public test3() {
        const sprite = Sprite.from(monster);

        // Set the initial position
        sprite.anchor.set(0.5);
        sprite.x = 120;
        sprite.y = 120;

        // Opt-in to interactivity
        sprite.eventMode = 'static';

        // Shows hand cursor
        sprite.cursor = 'pointer';
        this._app.stage.addChild(sprite);

        let rectangle = new Graphics();
        rectangle.lineStyle(4, 0xFF3300, 1);
        rectangle.beginFill(0x66CCFF);
        rectangle.drawRect(0, 0, 64, 64);
        rectangle.endFill();
        sprite.addChild(rectangle);
        //rectangle.pivot.set(-32, -32);

        // const sprite1 = Sprite.from(monster);
        // sprite1.anchor.set(0.5);
        // rectangle.addChild(sprite1);

        // const sprite1 = Sprite.from(monster);
        // //sprite1.anchor.set(0.5);
        // //sprite1.x = 0;
        // //sprite1.y = 0;
        // sprite1.position.set(-40.5, -33);
        // sprite.addChild(sprite1);
    }

    constructor(app: Application) {
        this._app = app;
        this._view = new MainWindow(app);
        this._model = dragonBones;

        this._app.stage.eventMode = 'static';
        this._app.stage.hitArea = app.screen;
        this._initControllers();
        this._cursorManager = new CursorManager(this._app, this._view.armatureView);
        //this.testViewport();
        //this.test4();

        // let dragTarget: Sprite | null = null;

        // function onDragMove(event: any) {
        //     if (dragTarget) {
        //         dragTarget.parent.toLocal(event.global, undefined, dragTarget.position);
        //     }
        // }

        // function onDragStart() {
        //     // store a reference to the data
        //     // the reason for this is because of multitouch
        //     // we want to track the movement of this particular touch
        //     // this.data = event.data;
        //     if (!app) {
        //         return;
        //     }

        //     this.alpha = 0.5;
        //     dragTarget = this;
        //     app.stage.on('pointermove', onDragMove);
        // }

        // function onDragEnd() {
        //     if (!app) {
        //         return;
        //     }
        //     if (dragTarget) {
        //         app.stage.off('pointermove', onDragMove);
        //         dragTarget.alpha = 1;
        //         dragTarget = null;
        //     }
        // }



        // //Position the triangle after you've drawn it.
        // //The triangle's x/y position is anchored to its first point in the path
        // triangle.x = 100;
        // triangle.y = 100;
        // this._stage.addChild(triangle);


        // // Create a new texture
        // const texture = Texture.from(logo);
        // const bunny = new Sprite(texture);
        // bunny.anchor.set(0.5);
        // bunny.x = 50;
        // bunny.y = 50;
        // bunny.interactive = true;
        // app.stage.addChild(bunny);

        // const texture = Texture.from(Monster);
        // const monster = new Sprite(texture);
        // monster.x = 50;
        // monster.y = 50;
        // monster.anchor.set(0.5);
        // monster.eventMode = 'static';
        // monster.cursor = 'pointer';
        // monster.on('pointerdown', onDragStart, monster);


        // app.stage.addChild(monster);
        // console.log("monster ", monster.transform.position.x);
        // console.log("monster ", monster.position);

        // const monster1 = new Sprite(texture);
        // monster1.x = 50;
        // monster1.y = 50;
        // monster1.anchor.set(0.5);
        // monster.addChild(monster1);
        //console.log("monster1 ", monster1.transform.position);
        //console.log("monster1 ", monster1.position);
        //const world_transform = monster1.worldTransform;
        // console.log("monster1 ", world_transform, world_transform.a, world_transform.b, world_transform.c,
        //     world_transform.d, world_transform.tx, world_transform.ty,monster1.rotation, monster1.getGlobalPosition());

        //console.log("monster1 ", monster1.rotation, monster1.getGlobalPosition());

        // bunny.on('mousedown', (e) => {
        //     console.log('bottom', viewport.bottom);
        //     console.log('top', viewport.top);
        //     console.log('left', viewport.left);
        //     console.log('right', viewport.right);
        //     console.log("scale", viewport.scaled);
        //     console.log("window.innerWidth", window.innerWidth);
        //     console.log("window.innerHeight", window.innerHeight);
        //     console.log("screenWidthInWorldPixels", viewport.screenWidthInWorldPixels);
        //     console.log("screenWorldWidth", viewport.screenWorldWidth);
        //     console.log("============")
        // });


        // this._app.stage.on('pointerup', onDragEnd);
        // this._app.stage.on('pointerupoutside', onDragEnd);

        this._app.ticker.start();

        // // Move container to the center
        //container.x = 0;
        // container.y = 500;

        // // Center bunny sprite in local container coordinates
        // container.pivot.x = container.width / 2;
        // container.pivot.y = container.height / 2;

        // // Listen for animate update
        // let flag = 50;
        //app.ticker.add((delta) => {
        // const world_transform = monster.worldTransform;
        // console.log("monster ", world_transform.a, world_transform.b, world_transform.c,
        //     world_transform.d, world_transform.tx, world_transform.ty);
        // // flag--;
        // if (flag>0) {
        //     console.log("monster1 ", world_transform, world_transform.a, world_transform.b, world_transform.c,
        //          world_transform.d, world_transform.tx, world_transform.ty, monster1.getGlobalPosition());
        // }

        // if (flag === false) {
        //     console.log("monster1 ", world_transform, world_transform.a, world_transform.b, world_transform.c,
        //         world_transform.d, world_transform.tx, world_transform.ty, monster1.getGlobalPosition());
        //     flag = true;
        // }
        // console.log("flag", flag);
        // rotate the container!
        // use delta to create frame-independent transform
        //container.rotation -= 0.01 * delta;
        // console.log("monster1 ", world_transform, world_transform.a, world_transform.b, world_transform.c,
        // world_transform.d, world_transform.tx, world_transform.ty, monster1.getGlobalPosition());
        //});
        app.ticker.add(this.update, this);
    }

    public registerEventListener() {

    }

    public removeEventListener() {

    }
}